Next.jsのカスタム404ページ

Javascript

Next.jsプロジェクトのpagesフォルダ下に404.tsxというページを新規に作成｡

import { Card, CardContent, Container } from '@mui/material'

const NotFound = () => {
  return (
    <Container maxWidth="sm">
      <Card sx={{ p: 3, mt: 8, backgroundColor: '#EEEEEE' }}>
        <CardContent sx={{ lineHeight: 2 }}>
          お探しになったページは存在しません｡
        </CardContent>
      </Card>
    </Container>
  )
}

export default NotFound

などとすると特に設定することなく404ページがオリジナルのものと置き換わる｡

← Next.jsでブラウザタブのタイトルを設定 linuxコマンド小ネタ集 →